<template>
	<view>
		<view class="fs34 color-232323 fw-700 pl20 pt10">今天想找什么？</view>
		<view class="px20 mt28 mb10">
			<u-search placeholder="请输入搜索内容" :show-action="false" bg-color="#fff" :border-color="$zs"
				:search-icon-color="$zs" height="76" placeholder-color="#B7B5B5" v-model="keywords" @search="search">
			</u-search>
		</view>
		<u-tabs :list="tabs" :is-scroll="false" :current="current" @change="e=>current=e" :active-color="$zs"></u-tabs>
		<view class="bg-f8f m20 radius20 p20">
			<view class="flex row-between mb26 ">
				<view class="fs28 color-232323">
					历史搜索记录
				</view>
				<view class="flex border-zs w118  h52 flex row-center radius28" @click="del()">
					<view class="color-zs fs24">
						清除
					</view>
					<image src="/static/img/index/close.png" class="h22 w22 ml10" mode=""></image>
				</view>
			</view>
			<view class="flex flex-wrap" style="margin-right: -20rpx;">
				<view class="w-max" v-if="!list.length">
					<u-empty mode='history' />
				</view>
				<view v-for="(item,index) in list" :key="index" class="bg-fff radius34 fs26  text-center p20 mb20 mr20"
					style="min-width: 150rpx;" @click="keywords=item,search()">{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [
					{
						name: '服务',
						api:'/member/search/serviceList',
						type: 'fu',
					},
					{
						type: 'yy',
						api: '/member/search/hospitalList',
						name: '医院',
					},
					{ 
						type: 'pzs',
						api: '/member/search/masterList',
						name: '陪诊师',
					},
					{
						type: 'pzjg',
						api: '/member/search/organList',
						name: '陪诊机构',
					}
				],
				current: 0,
				list: uni.getStorageSync('search') || [],
				keywords: '',
			};
		},
		methods: {
			search() {
				this.$u.route('/pages/index/search/searchList', {
					keywords: this.keywords,
					...this.tabs[this.current]
				})
				let list = this.list
				if (this.keywords) list.unshift(this.keywords)
				list = [...new Set(list)]
				if (list.legth > 10) list.length = 10
				this.list = list
				uni.setStorageSync('search', list)
			},
			del() {
				this.$showModal('清除历史记录').then(res => {
					let list = []
					this.list = list
					uni.setStorageSync('search', list)
				})
			},
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
</style>
